// import { addRule, removeRule, rule, updateRule } from '@/services/api/auth';
import { assignmentsSearch, delItem } from '@/services/api/assignments';
import { AssignmentsParams, AssignmentsResultItem } from '@/services/api/model/assignmentsModel';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Button, Image, Popconfirm, Space } from 'antd';
import React, { useRef } from 'react';

const Gateway: React.FC = () => {
  const actionRef = useRef<ActionType>();
  //提交
  // const onSubmit = () => {
  //   // 重置到默认值，包括表单
  //   // 断言标识,reloadAndRest一定是存在的
  //   actionRef.current!.reloadAndRest!();
  // };
  /**
   * @en-US Pop-up window of new window
   * @zh-CN 新建窗口的弹窗
   *  */

  // 删除
  const handleConfirm = async (id: string) => {
    // 这里 return 一个 primise 之后会执行异步关闭 resolve(null) 之后关闭
    try {
      await delItem(id);
      actionRef.current?.reloadAndRest!();
      Promise.resolve(null);
    } catch (error) {
      Promise.resolve(null);
    }
  };
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */

  const columns: ProColumns<AssignmentsResultItem>[] = [
    {
      title: '状态',
      align: 'center',
      key: 'status',
      dataIndex: ['ideviceAssignment', 'status'],
      valueEnum: {
        Active: { text: '未激活', status: 'Default' },
        Released: { text: '激活', status: 'Processing' },
      },
    },
    {
      key: 'releasedDate',
      title: '发布时间',
      // 数组类型的,这里表示: user.username
      dataIndex: ['ideviceAssignment', 'releasedDate'],
      align: 'center',
      valueType: 'dateTime',
    },
    {
      key: 'createdDate',
      title: '分配时间',
      valueType: 'dateTime',
      // 数组类型的,这里表示: user.username
      dataIndex: ['ideviceAssignment', 'createdDate'],
      align: 'center',
    },

    {
      title: '设备',
      valueType: 'avatar',
      key: 'device',
      align: 'center',
      render: (_, record) => (
        <Space>
          <Image
            src={IMG_URL + record.ideviceAssignment?.device?.deviceType?.imageUrl}
            width={40}
          />
          <a target="_blank" rel="noopener noreferrer">
            {record.ideviceAssignment?.device?.name}
          </a>
        </Space>
      ),
    },
    {
      key: 'user',
      title: '用户',
      valueType: 'avatar',
      align: 'center',
      render: (_, record) => (
        <Space>
          <Image src={IMG_URL + record.user?.url} width={40} />
          <a target="_blank" rel="noopener noreferrer">
            {record.user?.username}
          </a>
        </Space>
      ),
    },
    {
      key: 'area',
      title: '站点',
      valueType: 'avatar',
      align: 'center',
      render: (_, record) => (
        <Space>
          <Image src={IMG_URL + record.ideviceAssignment?.area?.imageUrl} width={40} />
          <a target="_blank" rel="noopener noreferrer">
            {record.ideviceAssignment?.area?.name}
          </a>
        </Space>
      ),
    },
    {
      key: 'asset',
      title: '网关',
      valueType: 'avatar',
      align: 'center',
      render: (_, record) => (
        <Space>
          <Image src={IMG_URL + record.ideviceAssignment?.asset?.imageUrl} width={40} />
          <a target="_blank" rel="noopener noreferrer">
            {record.ideviceAssignment?.asset?.name}
          </a>
        </Space>
      ),
    },
    {
      key: 'd',
      title: '音箱',
      valueType: 'avatar',
      align: 'center',
      render: (_, record) => (
        <Space>
          <Image src={IMG_URL + record.ideviceAssignment?.asset?.imageUrl} width={40} />
          <a target="_blank" rel="noopener noreferrer">
            {record.ideviceAssignment?.asset?.name}
          </a>
        </Space>
      ),
    },

    {
      key: 'd1',
      title: '操作',
      width: 100,
      align: 'center',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <Popconfirm
          key={'del-1'}
          title="确定删除吗"
          onConfirm={() => handleConfirm(record.ideviceAssignment?.token)}
        >
          <Button key={'del1'} danger style={{ width: '100%' }} size="small" type="text">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable<AssignmentsResultItem>
        actionRef={actionRef}
        rowKey={'id'}
        search={false}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params: AssignmentsParams,
        ) => {
          // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
          // 如果需要转化参数可以在这里进行修改
          const msg = await assignmentsSearch({
            page: params.current,
            pageSize: params.pageSize,
            includeArea: true,
            includeAsset: true,
            includeCustomer: false,
            includeDevice: true,
            includeVoiceBox: false,
            userIds: '',
          });
          return {
            data: msg.results.map((item) => {
              return {
                ...item,
                // 这个接口的第一层没有返回id 会导致缺少key
                id: item.ideviceAssignment?.id,
              };
            }),
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            // 不传会使用 data 的长度，如果是分页一定要传
            total: msg.numResults,
          };
        }}
        columns={columns}
      />
    </PageContainer>
  );
};
export default Gateway;
